import React, {Component} from 'react';
import './Playlist.less'
import HotCmd from "../../components/HotCmd/HotCmd";
import Catlist from "../../components/Catlist/Catlist";

class PlayList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            catlist: {},
            title:'全部'
        }
    }
    componentDidMount() {
        /**
         * 歌单分类
         * 说明 : 调用此接口,可获取歌单分类,包含 category 信息
         * 调用例子 : /playlist/catlist
         * http://localhost:3001/home/playlist
         */
        fetch(`http://localhost:3000/playlist/catlist`)
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
                this.setState({
                    catlist:res
                })
            })
    }
    getPlaylist(){

    }
    getCatlist(catlist){
        //显示选择的分类
        console.log(catlist)
        this.setState({
            title:catlist
        })
    }
    render() {
        const {catlist,title}=this.state;
        return (
            <div className='playlist wrap'>
                <button onClick={this.getPlaylist.bind(this)} className='menu'>选择分类</button>
                <div className={'hidden'}>
                    {
                        JSON.stringify(catlist)==='{}'?
                            ''
                            :
                            <Catlist catlist={catlist} getCatlist={this.getCatlist.bind(this)}/>
                    }
                </div>

                <HotCmd title={title} button={true} />
            </div>
        );
    }
}

export default PlayList;